<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<script type="text/javascript">
		// 1、把你了解的 vue 响应式原理阐述一下
		/*
			vue 三个核心类
			Observer: 通过 Object.defineProperty() 重写对象的key 
			Dep： 用于收集响应式对象的依赖关系，每个响应式对象都有一个 dep 实例，dep.subs = watcher, 当数据发生变化时，会通过 dep.notify 方法通知各个 watcher
			Watcher： 观察者对象，render warcher、computed watcher、user watcher

			依赖收集

			1. initState 对 computed 属性初始化时，会触发 computed watcher 依赖收集
			2. initState 对监听的属性初始化的时候，会触发 user watcher 依赖收集
			3. render 触发 render watcher 依赖收集

			派发更新

			1. 组件中的响应式数据进行了修改，会触发 setter 逻辑
			2. dep.notify()
			3. 遍历所有的 subs,调用每一个 watcher 中的 update 方法更新视图

			总结原理：
			1. 当创建 Vue 实例时，vue 会遍历 data 中的所有属性，通过 Object.defineProperty() 为属性添加 getter setter对数据进行劫持
			2. 每个组件的实例都会有对应的 watcher 实例，
		*/
		// 2、计算属性的实现

		console.log(window.history)
		window.onpopstate = function(event) {
			console.log(window.history.length)
		  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
		};
		//绑定事件处理函数.
		history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
		history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
		history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
		history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
		history.back(); // 弹出 "location: http://example.com/example.html, state: null
		history.go(1);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3} 
	</script>
</body>
</html>